import { InfoCircleOutlined, UserSwitchOutlined } from '@ant-design/icons';
import { Dropdown, Avatar, message, Modal, Descriptions, Typography } from 'antd';
import type { MenuProps } from 'antd';
import React, { useState, useEffect } from 'react';
import { getUsers, switchUser, getUserInfo } from "@/services/User";

// 定义 SwitchUserProps 类型，用于传递子组件属性
export type SwitchUserProps = {
  children?: React.ReactNode; // 子组件节点
};

// 定义 SwitchUser 组件
const SwitchUser: React.FC<SwitchUserProps> = ({ children }) => {
  // 定义 users 状态，用于存储用户列表
  const [users, setUsers] = useState<UserItem[]>([]);
  // 定义 userInfo 状态，用于存储当前用户的信息
  const [userInfo, setUserInfo] = useState<UserInfo>();
  // 定义 selectedKeys 状态，用于存储选中的用户键值
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  // 定义 isModalOpen 状态，用于控制账号信息模态框的显示
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 从 Typography 组件中解构出 Text
  const { Text } = Typography;

  // 定义 handleUserInfoOk 方法，关闭模态框（确定按钮事件）
  const handleUserInfoOk = () => {
    setIsModalOpen(false);
  };

  // 定义 handleUserInfoCancel 方法，关闭模态框（取消按钮事件）
  const handleUserInfoCancel = () => {
    setIsModalOpen(false);
  };

  // 定义 handleUsers 方法，获取用户列表并更新状态
  const handleUsers = async () => {
    try {
      const response = await getUsers(); // 调用 getUsers 方法获取用户列表
      if (response.success) {
        setUsers(response.data); // 更新 users 状态
        // 找到当前用户并设置选中的键值
        const currentUser = response.data.find((user: UserItem) => user.current);
        if (currentUser) {
          setSelectedKeys([currentUser.wxId]);
        }
      }
    } catch (error) {
      console.error(error); // 打印错误信息
    }
  };

  // 定义 handleUserInfo 方法，获取当前用户信息并更新状态
  const handleUserInfo = async () => {
    try {
      const response = await getUserInfo(); // 调用 getUserInfo 方法获取当前用户信息
      if (response.success) {
        setUserInfo(response.data); // 更新 userInfo 状态
      }
    } catch (error) {
      console.error(error); // 打印错误信息
    }
  };

  // 使用 useEffect，在组件加载时调用 handleUsers 方法初始化用户列表
  useEffect(() => {
    handleUsers();
  }, []);

  // 定义 onClick 方法，处理菜单项点击事件
  const onClick: MenuProps['onClick'] = async ({ key }) => {
    const selectKey = `${key}`; // 获取点击项的键值

    if (selectKey === 'switch') {
      return; // 如果点击的是 "切换账号" 菜单项，不执行任何操作
    }

    if (selectKey === 'userInfo') {
      setIsModalOpen(true); // 显示模态框
      handleUserInfo(); // 获取用户信息
      return;
    }

    try {
      const response = await switchUser({ wxId: selectKey }); // 调用 switchUser 方法切换用户
      if (response.success) {
        window.location.reload(); // 刷新页面以反映切换结果
      }
    } catch (error) {
      console.error(error); // 打印错误信息
      message.error('切换用户失败，请稍后重试。'); // 显示切换失败的消息提示
    }
  };

  // 根据用户列表生成菜单项
  const userMenuItems = users.map((user) => ({
    key: user.wxId, // 键值为用户的微信 ID
    label: user.nickname, // 标签为用户昵称
    icon: <Avatar shape="square" size={20} src={user.avatar} />, // 显示用户头像
  }));

  // 定义完整的菜单项，包括切换账号和查看账号信息
  const menuItems = [
    {
      key: 'switch',
      icon: <UserSwitchOutlined />, // 图标为切换用户图标
      label: '切换账号', // 标签为 "切换账号"
      children: [...userMenuItems], // 子菜单项为用户菜单项
    },
    {
      type: 'divider' as const, // 添加分隔线
    },
    {
      key: 'userInfo',
      icon: <InfoCircleOutlined />, // 图标为信息图标
      label: '账号信息', // 标签为 "账号信息"
    },
  ];

  // 返回组件 JSX 结构
  return (
    <>
      {/* 下拉菜单组件 */}
      <Dropdown menu={{ selectedKeys, items: menuItems, onClick }}>
        {children} {/* 子组件作为触发下拉菜单的内容 */}
      </Dropdown>

      {/* 显示账号信息的模态框 */}
      <Modal open={isModalOpen} onOk={handleUserInfoOk} onCancel={handleUserInfoCancel} width={1000}>
        <Descriptions title="账号信息">
          {/* 显示微信 ID */}
          <Descriptions.Item label="微信Id">{userInfo?.wxId}</Descriptions.Item>
          {/* 显示版本号 */}
          <Descriptions.Item label="版本号">{userInfo?.version}</Descriptions.Item>
          {/* 显示文件目录，文本超出部分省略 */}
          <Descriptions.Item label="文件目录">
            <Text ellipsis style={{ width: 200 }}>{userInfo?.basePath}</Text>
          </Descriptions.Item>
          {/* 显示昵称 */}
          <Descriptions.Item label="昵称">{userInfo?.nickname}</Descriptions.Item>
          {/* 显示账号 */}
          <Descriptions.Item label="账号">{userInfo?.account}</Descriptions.Item>
          {/* 显示手机号 */}
          <Descriptions.Item label="手机号">{userInfo?.mobile}</Descriptions.Item>
        </Descriptions>
      </Modal>
    </>
  );
};

// 导出 SwitchUser 组件
export default SwitchUser;
